<template>
	<!-- 我的评价 -->
	<view class="comment">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="我的评价"></tab-top>
		<!-- #endif -->
		<!--<view class="header"></view>-->
		<view class="tab">
			<view class="tab-item" @tap="changeList(index)" v-for="(item, index) in tab" :key="index">
				<view :class="{ text: current == index }">{{ item.name }}({{ item.type }})</view>
				<view :class="{ active: current == index }"></view>
			</view>
		</view>
		<view class="main_items" v-for="(item, index) in list" :key="index" v-if="show == 1">
			<view class="head">
				<view class="head_l">
					<view class="img"><image :src="item.user_info.head_images||'/static/bg/img.png'"></image></view>
					<view class="head_box">
						<view class="name">{{ item.user_info.username }}</view>
						<view class="time">{{ item.time }}</view>
					</view>
				</view>
				<view class="head_r">
					<uni-rate max="5" size="16" :value="item.clean_grade" disabled="true"></uni-rate>
				</view>
			</view>
			<view class="center">{{item.content}}</view>
			<view class="foot" v-if="item.image">
					<image v-for="(val,key) in item.image" :key="key" style="display: inline-block;" :src="val+'?imageView2/1/w/888/h/664'"></image>
			</view>
		</view>
		<view class="show" v-if="show == 2">
			<image src="/static/bg/noEvaluation.png"></image>
			<view class="show_text">您还没有评价哦</view>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	data() {
		return {
			tab: [{ name: '全部', type: '0' }, { name: '好评', type: '0' }, { name: '差评', type: '0' }, { name: '有图', type: '0' }],
			current: 0,
			show: 0,
			list: []
		};
	},
	async onLoad(e) {
		this.id = e.id
		let [_evaluate, evaluate] = await this.evaluate(this.id);
		if(_evaluate,evaluate.data.data.list.list.length == 0){
			this.show = 2;
			return;
		}
		this.show = 1;
		this.list = evaluate.data.data.list.list;
		this.tab[0].type = evaluate.data.data.list.total
		this.tab[1].type = evaluate.data.data.list.praise
		this.tab[2].type = evaluate.data.data.list.bad
		this.tab[3].type = evaluate.data.data.list.have_image
		this.list.forEach(v => {
			v.time = moment(v.create_time*1000).format('YYYY-MM-DD HH:mm');
		});
	},
	methods: {
		async changeList(index) {
			this.list = [];
			this.show = 0;
			this.current = index;
			let [_evaluate, evaluate] = await this.evaluate(this.id,index);
			if(_evaluate,evaluate.data.data.list.list.length == 0){
				this.show = 2;
				return;
			}
			this.show = 1;
			this.list = evaluate.data.data.list.list;
			console.log(this.num);
			this.list.forEach(v => {
				v.time = moment(v.create_time*1000).format('YYYY-MM-DD HH:mm');
			});
		},
		evaluate(e,type) {
			return this.getReq({
				url: 'both/evaluate',
				data: {
					id: e,
					id_type: 1,
					type:type
				}
			});
		}
	},
	components:{
		uniRate
	}
};
</script>

<style scoped lang="scss">
.comment {
	width: 750upx;
	height: 496upx;
	color: #333333;
	.header {
		width: 100%;
		height: 226upx;
		border-bottom: 10upx solid #f0f0f0;
	}
	.tab {
		background-color: #fff;
		width: 100%;
		height: 44upx;
		display: flex;
		color: #999999;
		justify-content: space-around;
		padding: 40upx 0 0 0;
		border-bottom: 1upx solid #e5e5e5;
		.tab-item {
			height: 44upx;
			display: inline-block;
			text-align: center;
			font-size: 32upx;
			line-height: 32upx;
			color: #999999;
			vertical-align: text-top;
			.text {
				color: #3595f9;
			}
			.active {
				margin: 0 auto;
				margin-top: 10upx;
				width: 120upx;
				height: 4upx;
				background-color: #3595f9;
				border-radius: 2upx;
			}
		}
	}
	.show {
		width: 518upx;
		padding: 100upx 116upx;
		position: relative;
		position: relative;
		.show_text {
			position: absolute;
			top: 400upx;
			left: 290upx;
			font-size: 24upx;
			color: #999;
		}
		image {
			width: 518upx;
			height: 444upx;
		}
	}
	.main_items::after{
		content: '';
		display: block;
		width: 702upx;
		height: 1upx;
		margin: 0 auto;
		margin-top:30upx; 
		background-color: #e5e5e5;
	}
	.main_items {
		width: 702upx;
		padding: 0 24upx;
		.head {
			width: 100%;
			height: 140upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.head_l {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img {
					width: 80upx;
					height: 80upx;
					margin-right: 22upx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.head_box {
					font-size: 28upx;
					.time {
						font-size: 24upx;
						color: #999999;
					}
				}
			}
			.head_r {
				image {
					width: 22upx;
					height: 22upx;
					margin-left: 4upx;
				}
			}
		}
		.center {
			font-size: 28upx;
			line-height: 44upx;
			width: 700upx;
			display:block;
			word-break: break-all;
			word-wrap: break-word;
		}
		.foot {
			padding-top: 30upx;
			width: 100%;
			image:nth-child(3n){
				margin-right: 0upx;
			}
			image {
				width: 222upx;
				height: 166upx;
				background-color: #3595f9;
				border-radius: 8upx;
				margin-right: 16upx;
			}
		}
	}
	
}
</style>
